<template>
	<view class="agent-search-box">
		<text class="search-title">{{props.tipText}}</text>
		<view class="agent-search-bar-box">
			<xh-search-bar :placeholder="placeholder" v-model="searchText" @searchResult="searchResult"></xh-search-bar>
		</view>
		<text class="sort-btn" v-if="props.showSort" @tap="showSortPop">排序</text>
		<view class="sort-mask" v-if="show" @tap="show = false">
			<view class="sort-box">
				<view class="sort-item" :class="[selectSortKey == item.key ? 'sort-item-active' : '']" @tap="didSelectItem(item)" v-for="(item,index) in sortList" :key="index">{{item.value}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	const selectSortKey = ref('')
	const searchText = defineModel()
	const emits = defineEmits(['searchResult','sortResult'])
	const props = defineProps({
		// 是否有排序功能
		showSort:{
			type:Boolean,
			default:true
		},
		placeholder:{
			type:String,
			default:'输入代理商名称或手机号'
		},
		tipText:{
			type:String,
			default:'为了保护市场规范，只显示您直属的代理商数据'
		},
		sortList:{
			type:Array,
			default:()=>{
				return [{value:'按认证时间',key:'IDENT_TIME'},{value:'按上月交易额',key:'LAST_MONTH'},{value:'按本月交易额',key:'THIS_MONTH'},{value:'按总交易额',key:'ALL_TRANS'},{value:'按机具数',key:'TOTAL_NUM'}]
			}
		}
	})
	const show = ref(false)
	//排序
	const showSortPop = ()=>{
		show.value = true
	}
	// 选择排序类型
	const didSelectItem = (item)=>{
		show.value = false
		selectSortKey.value = item.key
		emits('sortResult',item.key)
	}
	const searchResult = ()=>{
		emits('searchResult')
	}
</script>

<style lang="scss" scoped>
	.agent-search-box {
		background-color: $xh-bg-color;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		.sort-mask{
			position: absolute;
			left: 0;
			right: 0;
			height: 100vh;
			background-color: transparent;
			z-index: 99;
			.sort-box {
				position: absolute;
				top: 40rpx;
				right: 0;
				width: 200rpx;
				background-color: white;
				display: flex;
				flex-direction: column;
				box-shadow: 0 0 10px #eee;
				border-radius: 10rpx;
				.sort-item {
					display: flex;
					align-items: center;
					justify-content: center;
					border-bottom: 1px solid $xh-line-color;
					font-size: 26rpx;
					padding: 16rpx 0;
				}
				.sort-item-active{
					color: $xh-theme-color;
				}
			}
		}
		.search-title {
			color: $xh-color-9;
			font-size: 24rpx;
		}
		.agent-search-bar-box{
			padding: 30rpx 0;
			width: 100%;
		}
		.sort-btn {
			position: absolute;
			right: 0;
			top: -2rpx;
			font-weight: bold;
			color: $xh-theme-color;
			
		}
	}
</style>